import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {List, Icon, Tag, BackTop } from 'antd';

import ArticleContent from '@/components/ArticleContent';
import styles from './Detail.less';

@connect(({ post, loading }) => ({
  post,
  loading: loading.effects['post/fetchPostDetail'],
}))
class BasicProfile extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'post/fetchPostDetail',
      payload: this.props.match.params.id
    });
  }

  render() {
    const { 
      post: {detail, tags}, 
    } = this.props;
    
    const IconText = ({ type, text }) => (
      <span>
        <Icon type={type} style={{ marginRight: 8 }} />
        {text}
      </span>
    );

    return (
      <List
        size="large"
        className={styles.articleContent}
        rowKey="id"
        itemLayout="vertical"
      >
        <List.Item
          key={detail.id}
        >
          <List.Item.Meta
            title={
              <a className={styles.listItemMetaTitle} href={detail.href}>
                {detail.title}
              </a>
            }
            description={
              <span>
                {tags.map(tag => (
                  <Tag key={tag.id}>{tag.title}</Tag>
                ))}
              </span>
            }
          />
          <ArticleContent data={detail} />
          <BackTop />
        </List.Item>
      </List>
    )
  }
}

export default BasicProfile;
